<template>
	<div class="box">
		<button @click="isSho">点击显示和隐藏</button>
		<transition-group 
			name="animate__bounce" 
			appear
			leave-active-class="animate__bounce"
			enter-active-class="animate__bounce" 
		>
			<h2 v-show="!isShow" :key="1">{{ msg }}</h2>
			<h2 v-show="isShow" :key="2">我来了</h2>
		</transition-group>
	</div>
</template>

<script>
import 'animate.css'

export default {
	name: 'TextA',
	data() {
		return {
			msg: '我走了',
			isShow: true
		}
	},
	methods: {
		isSho() {
			this.isShow = !this.isShow
		}
	}
}
</script>


<style scoped>
.box {
	width: 300px;
	margin: 0 auto;
}

h2 {
	width: 200px;
	height: 50px;
	background-color: tomato;
}